<template>
	<div>
		<Tabs :value="params.status" @on-click="handleChangeTab">
	        <TabPane name="1" label="全部订单"></TabPane>
	        <TabPane name="0" label="待处理"></TabPane>
	        <TabPane name="4" label="处理中"></TabPane>
	        <TabPane name="2" label="已处理"></TabPane>
	        <TabPane name="3" label="已取消"></TabPane>
	    </Tabs>
	    <SuperTable
	    	ref="table"
	    	path="API_ORDER_SALE_LISTS"
	    	:columns="columns"
	    	:params="params"
	    	:loading="false"
	    	@on-loaded="switchLoading = false"
	    >
	    	<div slot="header-left">
	    		<Button type="primary" icon="ios-download-outline">导出筛选数据</Button>
	    	</div>
	    	
	    	<Form slot="header-right" :mode="filterForm" inline @submit.native.prevent>
	    		<FormItem label="按时间">
	    			<DatePicker type="date" style="width: 200px"></DatePicker>
	    		</FormItem>
                <FormItem label="关键词">
                    <Input v-model="filterForm.keywords" placeholder="请输入关键词搜索" suffix="ios-search" clearable style="width: 240px"></Input>
                </FormItem>
                <Button type="primary" @click="handleSearch">筛选</Button>
	    	</Form>
	    	
	    	<div class="ui-table-cell ui-flex" slot-scope="{ row }" slot="goods">
	    		<ImageCell :src="'https://xzcustomer.cdn.bcebos.com/' + row.thumb"></ImageCell>
	            <div class="ui-flex-full" style="margin-left: 10px;">
	            	<p class="ui-ellipsis2">{{ row.name }}</p>
	            	<p class="ui-ellipsis ui-text-primary">{{ row.spec }}</p>
	            </div>
	        </div>
	    	<div class="ui-table-cell" slot-scope="{ row }" slot="money">
	            <p class="ui-table-cell-line">实收金额：{{ row.real_money }}</p>
	            <p class="ui-table-cell-line">退款金额：{{ row.refund_money }}</p>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="custom">
	            <p class="ui-table-cell-line ui-ellipsis">姓名：{{ row.buyer.username }} ({{ row.buyer.mobile }})</p>
	            <p class="ui-table-cell-line">时间：{{ row.create_time }}</p>
	        </div>
	        <div class="ui-table-cell" slot-scope="{ row }" slot="status">
	            <p class="ui-table-cell-line">维权类型：{{ row.type_text }}</p>
	            <p class="ui-table-cell-line">订单状态：{{ row.status_text }}</p>
	        </div>
	        <template slot-scope="{ row, index }" slot="action">
	        	<Button type="primary" size="small" @click="handleGoDetail(row)">处理</Button>
	        	<Button type="error" size="small">取消</Button>
	        </template>
	    </SuperTable>
	    
	    <LoadingMask v-if="switchLoading"></LoadingMask>
	    
	</div>
</template>

<script>
import Util from '@/libs/util.js';
import SuperTable from '@/components/SuperTable.vue';
import LoadingMask from '@/components/LoadingMask.vue';
import PoptipCells from '@/components/PoptipCells.vue';
import ImageCell from '@/components/ImageCell/index.vue';
import ImageCells from '@/components/ImageCell/cells.vue';
import DrawerForm from '@/components/DrawerForm.vue';
export default {
	name: 'goodsList',
	components: {
		SuperTable,
		PoptipCells,
		LoadingMask,
		ImageCell,
		ImageCells,
		DrawerForm
	},
	data() {
		return {
			switchLoading: false,
			ids: [],
			filterForm: {
				keywords: '',
				brand_id: undefined,
				catid: []
			},
			params: {
				status: '1',
				keywords: '',
				page: 1,
				limit: 10,
				relations: ['order', 'buyer']
			},
			datas: [
				{
					thumb: '',
					name: '商品标题，最多占两行，如果超出两行自动 省略',
					spec: '规格值名称',
					status_text: '待处理',
					username: '董浩',
					mobile: '131 0880 7733',
					pay: '299.00',
					money: '299.00',
					datetime: '2019-01-11 23:27:69',
					address: '云南省 昆明市 西山区 福海街道 南亚第一国际C1座14层',
					type_text: '退款退货'
				}
			],
			columns: [
                {
                    title: '商品信息',
                    slot: 'goods',
                    minWidth: 248
                },
                {
                    title: '实收金额&退款金额',
                    slot: 'money',
                    minWidth: 177
                },
                {
                    title: '客户信息&申请时间',
                    slot: 'custom',
                    minWidth: 177
                },
                {
                    title: '维权类型&订单状态',
                    slot: 'status',
                    minWidth: 170
                },
                {
                    title: '操作',
                    slot: 'action',
                    align: "center",
                    minWidth: 120
                }
			],
			imgs: ['abns.png', 'saa.jpg']
		}
	},
	mounted() {
		
	},
	methods: {
		// 切换选项卡
		handleChangeTab(name) {
			this.switchLoading = true;
			this.params.status = name;
		},
		// 搜索
		handleSearch() {
			let cats = this.filterForm.catid;
			if(cats.length > 0) {
				this.params.catid = cats[cats.length - 1];
			}else{
				this.params.catid = '';
			}
			this.params.brand_id = this.filterForm.brand_id || '';
			this.params.keywords = this.filterForm.keywords;
		},
		handleGoDetail(row) {
			this.$router.push({name: 'order_retail_service_detail', query: {sn : row.sn}});
		}
	}
}
</script>